function appendingDiscussions(discussions) {
    let selector = ".content";
    $(selector).empty();
    console.log(discussions);
    for (let i = 0; i < discussions.length; i++) {
        var a = "<a href='/discussion/" + discussions[i].id + "'>" +
            "<div class=\"media\">\n" +
            "     <div class=\"media-left media-middle\">\n" +

            "         <span><img class=\"media-object img-circle\" src=\"" + discussions[i].user.avatarUrl + "\" alt=\"...\"></span>\n" +
            " <span class='nickname'>" + discussions[i].user.nickname + "</span>" +
            "     </div>" +
            "                    <div class=\"media-body\">\n" +
            "                        <h4 class=\"media-heading\">\n" +
            "                            <span class=\"title\">" + discussions[i].title + "</span>\n" +
            "                            <span class=\"pull-right\">\n" +
            "                                <span class=\"glyphicon glyphicon-time\">" + discussions[i].modifiedAt + "</span>\n" +
            "                                <span class=\"glyphicon glyphicon-heart\">" + discussions[i].likeCount + "</span>\n" +
            "                                <span class=\"glyphicon glyphicon-eye-open\">" + discussions[i].readCount + "</span>\n" +
            "                            </span>\n" +
            "                        </h4>\n" +
            "                        <p>" + discussions[i].content + "</p>\n" +
            "                    </div>\n" +
            "                </div></a>";
        $(selector).append(a);
    }
}

function appendingPagination(classification, pageRule) {
    let pre = "";
    if (pageRule.currentPage !== 1) {
        let prePage = pageRule.currentPage - 1;
        pre = "<li>\n" +
            "        <a href=\"" + "javascript:appendingDiscussion(" + "'" + classification + "'" + "," + prePage + ")\" aria-label=\"Previous\">\n" +
            "             <span aria-hidden=\"true\">&laquo;</span>\n" +
            "        </a>\n" +
            "  </li>";
    }
    let next = "";
    if (pageRule.currentPage !== pageRule.lastPage) {
        let nextPage = pageRule.currentPage + 1;
        next = "<li>\n" +
            "         <a href=\"" + "javascript:appendingDiscussion(" + "'" + classification + "'" + "," + nextPage + ")" + "\" aria-label=\"Next\">\n" +
            "             <span aria-hidden=\"true\">&raquo;</span>\n" +
            "         </a>\n" +
            "  </li>";
    }
    let selector = ".pagination";
    $(selector).empty();
    $(selector).append(pre);
    let bonus = "";
    for (let i = 0; i < pageRule.pages.length; i++) {
        if (pageRule.currentPage === pageRule.pages[i]) {
            bonus = "active";
        } else {
            bonus = "";
        }
        let a = "<li class='" + bonus + "'><a href=\"javascript:appendingDiscussion(" + "'" + classification + "'" + "," + pageRule.pages[i] + ")" + "\">" + pageRule.pages[i] + "</a></li>";
        $(selector).append(a);
    }
    $(selector).append(next);
}

function appendingDiscussion(classification, currentPage) {
    $.ajax({
        url: "/classification/" + classification + "/" + currentPage,
        type: "POST",
        dataType: "json",
        contentType: "application/json;charset=utf-8",
        success: function (response) {
            appendingDiscussions(response.data[0]);
            appendingPagination(classification, response.data[1]);
        },
        error: function (error) {
            console.log(error);
        }
    });
}

function discussion(data) {
    let c = data.split("/")[1];
    let target = ['.share', '.companion', '.help', '.journal'];
    for (let i = 0; i < target.length; i++) {
        $(target[i]).removeClass("active");
    }
    $("." + c).addClass("active");
    appendingDiscussion(c, 1);
}